{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人博客</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <style>
        .featured-post {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        .featured-post:hover {
            transform: translateY(-5px);
        }
        .post-card {
            transition: all 0.3s ease;
            border: none;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
        }
        .post-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        }
        .post-meta {
            color: #6c757d;
            font-size: 0.9rem;
        }
        .category-badge {
            transition: all 0.2s ease;
        }
        .category-badge:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm sticky-top">
        <div class="container">
            <a class="navbar-brand" href="{% url 'index' %}">
                <i class="fas fa-blog me-2"></i>我的技术博客
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="{% url 'index' %}">
                            <i class="fas fa-home me-1"></i>首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-code me-1"></i>技术文章
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-book me-1"></i>学习笔记
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-info-circle me-1"></i>关于我
                        </a>
                    </li>
                </ul>
                <form class="d-flex">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索文章...">
                        <button class="btn btn-light" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="container my-5">
        <div class="row">
            <!-- 左侧内容区 -->
            <div class="col-lg-8">
                <!-- 欢迎横幅 -->
                <div class="welcome-banner bg-light p-4 mb-4 rounded-3 shadow-sm">
                    <h1 class="display-6 fw-bold">欢迎来到我的技术博客</h1>
                    <p class="lead">这里分享编程技术、开发经验和学习心得</p>
                    <hr class="my-4">
                    <p>关注最新技术动态，探索编程世界的奥秘。</p>
                </div>

                <!-- 特色文章 -->
                <div class="featured-post card mb-4">
                    <img src="https://via.placeholder.com/800x400" class="card-img-top" alt="特色文章">
                    <div class="card-body">
                        <div class="mb-3">
                            <span class="badge bg-primary category-badge">Python</span>
                            <span class="post-meta ms-3">
                                <i class="far fa-calendar-alt me-1"></i>2023-05-15
                            </span>
                            <span class="post-meta ms-3">
                                <i class="far fa-eye me-1"></i>1,245 阅读
                            </span>
                        </div>
                        <h2 class="card-title">Django 3.2 新特性深度解析</h2>
                        <p class="card-text">全面介绍Django 3.2版本的新功能和使用技巧，包括异步视图、模型约束等...</p>
                        <a href="#" class="btn btn-primary stretched-link">阅读全文</a>
                    </div>
                </div>

                <!-- 最新文章列表 -->
                <h2 class="mb-4 border-bottom pb-2">
                    <i class="fas fa-newspaper me-2"></i>最新文章
                </h2>
                
                <div class="row row-cols-1 row-cols-md-2 g-4">
                    <!-- 文章卡片1 -->
                    <div class="col">
                        <div class="post-card card h-100">
                            <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="文章图片">
                            <div class="card-body">
                                <div class="mb-2">
                                    <span class="badge bg-success category-badge">前端开发</span>
                                    <span class="post-meta ms-2">2023-05-10</span>
                                </div>
                                <h5 class="card-title">Vue 3组合式API实战指南</h5>
                                <p class="card-text">详细介绍Vue 3的组合式API使用方法和最佳实践...</p>
                            </div>
                            <div class="card-footer bg-transparent">
                                <a href="#" class="btn btn-sm btn-outline-primary">阅读全文</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文章卡片2 -->
                    <div class="col">
                        <div class="post-card card h-100">
                            <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="文章图片">
                            <div class="card-body">
                                <div class="mb-2">
                                    <span class="badge bg-warning text-dark category-badge">数据库</span>
                                    <span class="post-meta ms-2">2023-05-08</span>
                                </div>
                                <h5 class="card-title">PostgreSQL性能优化技巧</h5>
                                <p class="card-text">分享PostgreSQL数据库的查询优化和索引设计经验...</p>
                            </div>
                            <div class="card-footer bg-transparent">
                                <a href="#" class="btn btn-sm btn-outline-primary">阅读全文</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文章卡片3 -->
                    <div class="col">
                        <div class="post-card card h-100">
                            <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="文章图片">
                            <div class="card-body">
                                <div class="mb-2">
                                    <span class="badge bg-info category-badge">DevOps</span>
                                    <span class="post-meta ms-2">2023-05-05</span>
                                </div>
                                <h5 class="card-title">Docker容器化部署实践</h5>
                                <p class="card-text">从零开始学习如何使用Docker部署Web应用...</p>
                            </div>
                            <div class="card-footer bg-transparent">
                                <a href="#" class="btn btn-sm btn-outline-primary">阅读全文</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文章卡片4 -->
                    <div class="col">
                        <div class="post-card card h-100">
                            <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="文章图片">
                            <div class="card-body">
                                <div class="mb-2">
                                    <span class="badge bg-secondary category-badge">算法</span>
                                    <span class="post-meta ms-2">2023-05-01</span>
                                </div>
                                <h5 class="card-title">常见排序算法比较与分析</h5>
                                <p class="card-text">详细比较各种排序算法的时间复杂度和适用场景...</p>
                            </div>
                            <div class="card-footer bg-transparent">
                                <a href="#" class="btn btn-sm btn-outline-primary">阅读全文</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <nav class="mt-4" aria-label="文章分页">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1">上一页</a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
            
            <!-- 右侧边栏 -->
            <div class="col-lg-4">
                <!-- 关于我 -->
                <div class="card mb-4 shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <i class="fas fa-user me-2"></i>关于作者
                    </div>
                    <div class="card-body text-center">
                        <img src="https://via.placeholder.com/150" class="rounded-circle mb-3" alt="作者头像">
                        <h5 class="card-title">技术博主</h5>
                        <p class="card-text">全栈开发者，专注于Web开发和数据科学，热爱分享技术知识。</p>
                        <div class="social-icons">
                            <a href="#" class="text-primary me-2"><i class="fab fa-github fa-lg"></i></a>
                            <a href="#" class="text-primary me-2"><i class="fab fa-twitter fa-lg"></i></a>
                            <a href="#" class="text-primary me-2"><i class="fab fa-linkedin fa-lg"></i></a>
                            <a href="#" class="text-primary"><i class="fas fa-envelope fa-lg"></i></a>
                        </div>
                    </div>
                </div>
                
                <!-- 文章分类 -->
                <div class="card mb-4 shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <i class="fas fa-folder me-2"></i>文章分类
                    </div>
                    <div class="list-group list-group-flush">
                        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            Python开发
                            <span class="badge bg-primary rounded-pill">15</span>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            前端技术
                            <span class="badge bg-primary rounded-pill">8</span>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            数据库
                            <span class="badge bg-primary rounded-pill">6</span>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            DevOps
                            <span class="badge bg-primary rounded-pill">4</span>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            算法与数据结构
                            <span class="badge bg-primary rounded-pill">12</span>
                        </a>
                    </div>
                </div>
                
                <!-- 热门标签 -->
                <div class="card mb-4 shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <i class="fas fa-tags me-2"></i>热门标签
                    </div>
                    <div class="card-body">
                        <a href="#" class="badge bg-secondary text-decoration-none me-1 mb-1">Django</a>
                        <a href="#" class="badge bg-secondary text-decoration-none me-1 mb-1">Vue</a>
                        <a href="#" class="badge bg-secondary text-decoration-none me-1 mb-1">React</a>
                        <a href="#" class="badge bg-secondary text-decoration-none me-1 mb-1">PostgreSQL</a>
                        <a href="#" class="badge bg-secondary text-decoration-none me-1 mb-1">Docker</a>
                        <a href="#" class="badge bg-secondary text-decoration-none me-1 mb-1">Kubernetes</a>
                        <a href="#" class="badge bg-secondary text-decoration-none me-1 mb-1">算法</a>
                        <a href="#" class="badge bg-secondary text-decoration-none me-1 mb-1">机器学习</a>
                        <a href="#" class="badge bg-secondary text-decoration-none me-1 mb-1">Nginx</a>
                        <a href="#" class="badge bg-secondary text-decoration-none me-1 mb-1">Redis</a>
                    </div>
                </div>
                
                <!-- 最新评论 -->
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <i class="fas fa-comments me-2"></i>最新评论
                    </div>
                    <div class="list-group list-group-flush">
                        <a href="#" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <small class="text-muted">张三</small>
                                <small>3天前</small>
                            </div>
                            <p class="mb-1">这篇文章对我帮助很大，感谢分享！</p>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <small class="text-muted">李四</small>
                                <small>1周前</small>
                            </div>
                            <p class="mb-1">期待更多关于Vue 3的内容！</p>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <small class="text-muted">王五</small>
                                <small>2周前</small>
                            </div>
                            <p class="mb-1">Docker的这部分内容讲得很清晰</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-3 mb-md-0">
                    <h5>关于博客</h5>
                    <p>分享编程技术、开发经验和学习心得的技术博客。</p>
                    <div class="social-icons">
                        <a href="#" class="text-white me-2"><i class="fab fa-github fa-lg"></i></a>
                        <a href="#" class="text-white me-2"><i class="fab fa-twitter fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-weixin fa-lg"></i></a>
                    </div>
                </div>
                <div class="col-md-4 mb-3 mb-md-0">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#" class="text-white text-decoration-none">首页</a></li>
                        <li class="mb-2"><a href="#" class="text-white text-decoration-none">技术文章</a></li>
                        <li class="mb-2"><a href="#" class="text-white text-decoration-none">学习笔记</a></li>
                        <li><a href="#" class="text-white text-decoration-none">关于我</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>联系我</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><i class="fas fa-envelope me-2"></i> contact@example.com</li>
                        <li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 中国，北京</li>
                        <li><i class="fas fa-link me-2"></i> https://example.com</li>
                    </ul>
                </div>
            </div>
            <hr class="bg-light my-3">
            <p class="text-center mb-0">&copy; 2023 我的技术博客. 保留所有权利.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>